<template>
<div id="progress-query">
    <div class="progress-query">
        <div class="processit-title">
            <mt-header title="进度查询" class="mt-header">
                <mt-button icon="back" slot="left" class="back" @click="$root.goBack()">返回</mt-button>
            </mt-header>
        </div>
        <div class="replace"></div>
         <div class="progressquery-navbar">
            <mt-navbar class="page-part" v-model="selected">
                <mt-tab-item id="1">处理中</mt-tab-item>
                <mt-tab-item id="2">已处理</mt-tab-item>
            </mt-navbar>
             <!-- tab-container -->
            <mt-tab-container v-model="selected">
                <mt-tab-container-item id="1">
                    <div class="tab-container3">
                        <div class="selected3"></div>
                        <div class="processitem" v-for="item in proposalList" :key="item.id">
                            <p class="processtime">{{item.createTimeString}}</p>
                            <div class="processinfo clearfix">
                                <div class="processinfo-left">
                                     <img :src="'static/img/ic'+item.dept+item.type+'.png'" alt="">
                                </div>
                               <div class="processinfo-right ">
                                   <p class="protitle">{{item.title}}</p>
                                   <div class="consultmsg">
                                       <div class="consultname msgcss"><span>咨询人：</span> <i>{{item.createrName}}</i></div>
                                       <div class="consulttime msgcss"><span>申请时间：</span><i>{{item.createTime | datefmt('YYYY-MM-DD')}}</i></div>
                                   </div>
                                   <div class="consultstatus">
                                       <span>状态：</span><em>沟通中</em>
                                   </div>
                                  <a href="javascript:;" @click="toDetail(item.id)">
                                        <img src="../assets/right_arrow.png" alt="" class="prodetail">
                                  </a>
                               </div>
                            </div>
                        </div>
                    </div>
            </mt-tab-container-item>
                <mt-tab-container-item id="2">
                     <div class="tab-container3">
                        <div class="selected4"></div>
                        <div class="processitem" v-for="item in historyList" :key="item.id">
                            <p class="processtime">{{item.createTimeString}}</p>
                            <div class="processinfo clearfix">
                                <div class="processinfo-left">
                                     <img :src="'static/img/ic'+item.dept+item.type+'.png'" alt="">
                                </div>
                               <div class="processinfo-right ">
                                   <p class="protitle">{{item.title}}</p>
                                   <div class="consultmsg">
                                       <div class="consultname msgcss"><span>咨询人：</span> <i>{{item.createrName}}</i></div>
                                       <div class="consulttime msgcss"><span>申请时间：</span><i>{{item.createTime | datefmt('YYYY-MM-DD')}}</i></div>
                                   </div>
                                   <div class="consultstatus">
                                       <span>状态：</span><em class="processed">已处理</em>
                                   </div>
                                  <a href="#" @click="toDetail2(item.id)" >
                                        <img src="../assets/right_arrow.png" alt="" class="prodetail">
                                  </a>
                               </div>
                            </div>
                        </div>
                    </div>
                </mt-tab-container-item>
            </mt-tab-container>
        </div>
    </div>
</div>
</template>

<script>
import { Navbar, TabItem } from "mint-ui";
import { mapGetters, mapActions } from "vuex";
import service from "../service";
import config from "configuration";
export default {
  components: {
    Navbar,
    TabItem
  },
  name: "progressquery",
  data() {
    return {
      historyList: [],
      createTime: 0,
      proposalList: [],
      workcode: "",
      selected: "1"
    };
  },
  computed: {
    ...mapGetters({
      loading: "getLoading",
      direction: "getDirection"
    })
  },
  mounted() {
    this.getItProposal();
    setTimeout(() => {
        this.getItProcessed();
    }, 1000);
  },
  methods: {
    getItProcessed() {
      var params = {};
      params.workcode = this.workcode;
      service.getItHistory(params).then(res => {
         if(res.code==100){
            this.historyList=res.list;
              this.historyList.forEach(element => {
                if(element.title.indexOf('-')>0){
                   element.title = element.title.split('-')[0]
                }
            });
            // console.log(this.historyList)
         }
      });
    },
    getItProposal() {
      service.getUser().then(data => {
        var params = {};
        params.workcode = this.workcode = data.employeenumber;
        service.getItProposal(params).then(res => {
          if (res.code == 100) {
            this.proposalList = res.list;
            this.proposalList.forEach(element => {
                if(element.title.indexOf('-')>0){
                   element.title = element.title.split('-')[0]
                }
            });
          }
        //   console.log('proposalList',this.proposalList)
        });
      });
    },
    toDetail(id) {
        // console.log(id)
      this.$router.push({ name: "problemdetail", params: { id: id } });
    },
    toDetail2(id) {
        // console.log('id2'+id)
      this.$router.push({ name: "problemdetail", params: { id: id } });
    }
  }
};
</script>
<style>
/* 把scoped去掉之后，mint-ui的样式才起作用 */
.mint-tab-item-label {
  border-left: 1px solid #cdd8e7;
}
.mint-tab-item:nth-of-type(1) .mint-tab-item-label {
  border-left: none;
}
.mint-navbar {
  padding-bottom: 1.3%;
  /* border-bottom: 1px solid #cdd8e7; */
}
</style>